<template>
  <p-card :bordered="false" :class="'cust-erp-sub-tab'">
     <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <p-form layout="inline" @keyup.enter.native="searchQuery">
            <p-row :gutter="24">

            </p-row>
          </p-form>
        </div>
        <!-- 查询区域-END -->



    <p-modal v-model="modalVisible" :title="modalTitle" okText="确定" :width="900" cancelText="取消" @ok="sureAddProduction" >
      <p-row :gutter="24">
        <p-col :span="2" >
          <p-form-item label="产品编码"></p-form-item>
        </p-col>
        <p-col :span="20">
          <p-input placeholder="请选择产品编码" v-model="pr.mcode" readOnly @click="clickMcodeInput"></p-input>
        </p-col>
      </p-row>

      <p-row :gutter="24">
        <p-col :span="2">
          <p-form-item label="产品名称">

          </p-form-item>
        </p-col>
        <p-col :span="20">
          <p-input  v-model="pr.mname" disabled></p-input>
        </p-col>
      </p-row>

      <!--<p-row :gutter="24">
        <p-col :span="2">
          <p-form-item label="封样图片">

          </p-form-item>
        </p-col>
        <p-col :span="20">
          <p-input v-model="pr.mname"  v-decorator="[ 'fileUrl', validatorRules.fileUrl]" placeholder="请输入封样图片"></p-input>
        </p-col>
      </p-row>-->



    </p-modal>


    <p-modal v-model="productionListVisible"  title="选择产品" :width="900" okText="确定" cancelText="取消" @ok="selectProductionFinish">
      <p-row>
        <p-form  :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <p-form-item label="产品编码">
            <p-input
                    v-model="selectMcode" @change="productionQuery"
            />
          </p-form-item>

        </p-form>
      </p-row>
      <p-row>
        <p-table
                ref="table"
                size="middle"
                bordered
                rowKey="id"
                :columns="productionColumns"
                :scroll="tableScroll"
                :dataSource="productionList"
                :loading="loading"
                :pagination="false"
                :rowSelection="{selectedRowKeys: productionKeys,onChange: productionSelectChange,type:'radio'}"
        >


        </p-table>
        <p-pagination
                v-model="productionIpagination.current"
                :total="productionIpagination.total"
                :page-size="productionIpagination.size"
                :showQuickJumper="true"
                @change="productionQuery"
                @showSizeChange="productionQuery"
                :show-total="total => `总共 ${productionIpagination.total} 条`"
        />
      </p-row>
    </p-modal>



    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <p-button v-if="mainId" @click="openAddBtn" type="primary" icon="plus">新增</p-button>

        <template v-if="cgButtonList && cgButtonList.length>0" v-for="(item,index) in cgButtonList">
          <p-button
            v-if=" item.optType=='js' "
            :key=" 'cgbtn'+index "
            @click="cgButtonJsHandler(item.buttonCode)"
            type="primary"
            :icon="item.buttonIcon">
            {{ item.buttonName }}
          </p-button>
          <p-button
            v-else-if=" item.optType=='action' "
            :key=" 'cgbtn'+index "
            @click="cgButtonActionHandler(item.buttonCode)"
            type="primary"
            :icon="item.buttonIcon">
            {{ item.buttonName }}
          </p-button>
        </template>

      <p-dropdown v-if="selectedRowKeys.length > 0">
        <p-menu slot="overlay">
          <p-menu-item key="1" @click="batchDel"><p-icon type="delete"/>删除</p-menu-item>
        </p-menu>
        <p-button style="margin-left: 8px"> 批量操作 <p-icon type="down" /></p-button>
      </p-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <p-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :scroll='tableScroll'
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">



            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>
            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
              <img v-else :src="getImgView(text)" height="25px" alt="图片不存在" style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
              <p-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="uploadFile(text)">
                下载
              </p-button>
            </template>

            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)">编辑</a>

              <p-divider type="vertical" />
              <p-dropdown>
                <a class="ant-dropdown-link">更多 <p-icon type="down" /></a>
                <p-menu slot="overlay">
                  <p-menu-item>
                    <p-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                      <a>删除</a>
                    </p-popconfirm>
                  </p-menu-item>
                    <template v-if="cgButtonLinkList && cgButtonLinkList.length>0" v-for="(btnItem,btnIndex) in cgButtonLinkList">
                      <p-menu-item :key=" 'cgbtnLink'+btnIndex " v-if="showLinkButton(btnItem,record)">
                        <a href="javascript:void(0);" @click="cgButtonLinkHandler(record,btnItem.buttonCode,btnItem.optType)">
                          <p-icon v-if="btnItem.buttonIcon" :type="btnItem.buttonIcon" />
                          {{ btnItem.buttonName }}
                        </a>
                      </p-menu-item>
                    </template>
                </p-menu>
              </p-dropdown>
            </span>
      </p-table>

    </div>

    <mesQcQualityFile-modal ref="modalForm"  :EnhanceJS="EnhanceJS"  @ok="modalFormOk" :mainId="mainId" :listaip="this.url.list"></mesQcQualityFile-modal>
  </p-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import MesQcQualityFileModal from './modules/MesQcQualityFileModal'
  import ButtonExpHandler from '@/components/jeecgbiz/modules/ButtonExpHandler'
  import { postAction,getAction,deleteAction } from '@/api/manage'


  export default {
    name: "MesQcQualityFileList",
    mixins:[JeecgListMixin],
    components: { MesQcQualityFileModal },
    props:{
      mainId:{
        type:String,
        default:'',
        required:false
      }
    },
    watch:{
      mainId:{
        immediate: true,
        handler(val) {
          if(!this.mainId){
            this.clearList()
          }else{
            this.queryParam['mesItmId'] = val
            this.loadData(1);
          }
        }
      }
    },
    data () {
      return {
        description: '检验模板维护管理页面',
        disableMixinCreated:true,
        EnhanceJS:'',
        cgButtonLinkList: [],
        cgButtonList: [],
        code: '',
        productionKeys:[],
        productionColumns:[
          {
            title:'产品编号',
            align:'center',
            dataIndex:'mcode',
          },
          {
            title:'产品名称',
            align:'center',
            dataIndex:'mname',
          }
        ],
        selectMcode:'',
        productForm:this.$form.createForm(this, { name: 'coordinated' }),
        modalTitle:'',
        productionList:[],
        productionIpagination:{
          current: 1,
          size: 10,
          pageSizeOptions: ["10", "20", "50"],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条";
          },

          total: 0,
        },

        pr:{
          id:0,
          mcode:'',
          mname:'',
        },
        modalVisible:false,
        productionListVisible:false,

        // 表头
        columns: [
          {
            title: "序号",
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align: 'center',
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'产品编码',
            align: 'center',
            dataIndex: 'mcode',
          },
          {
            title:'产品名称',
            align: 'center',
            dataIndex: 'mname',
          },
          {
            title:'封样图片',
            align: 'center',
            dataIndex: 'fileUrl',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: '/mes-quality/mesQcInspectTemplateMaintain/listMesQcQualityFileByMainId',
          delete: '/mes-quality/mesQcInspectTemplateMaintain/deleteMesQcQualityFile',
          deleteBatch: '/mes-quality/mesQcInspectTemplateMaintain/deleteBatchMesQcQualityFile',
          getColumns: '/mes-quality/online/cgform/api/getColumns/',
          buttonAction: '/mes-quality/online/cgform/api/doButton',
        },
        dictOptions:{
         templateType: [],
         isCustTemplate: [],
        },

      }
    },

    computed:{
      tableScroll:function(){
        if(this.columns.length > 12){
          return { x: this.columns.length*160+40 }
        }
      }
    },

    created() {
      this.setdefColumns();
      this.initButtonList();
    },
    methods: {
      setdefColumns() {
        if (this.columns.length > 12) {
          let arrLength = this.columns.length - 1
          this.columns[arrLength]['fixed'] = 'right'
          this.columns[arrLength]['width'] = 200
          this.columns[0]['width'] = 70
          this.columns[0]['fixed'] = 'left'
        }
      },

      clearList() {
        this.dataSource = []
        this.selectedRowKeys = []
        this.ipagination.current = 1
      },
      //2020/7/9
      initDictConfig() {
      },
      showLinkButton(item, record) {
        let btn = new ButtonExpHandler(item.exp, record);
        return btn.show;
      },
      initButtonList() {
        getAction(`${this.url.getColumns}06a44a7b36a547b087d992c5e7ed556b`).then((res) => {
          console.log("--获取自定义按钮->>", res);
          if (res.success) {
            this.code = res.data.code;
            this.initCgButtonList(res.data.cgButtonList)
            this.initCgEnhanceJs(res.data.enhanceJs)
          } else {
            this.$message.warning(res.msg)
          }
        })
      },
      initCgEnhanceJs(enhanceJs) {
        //console.log("--onlineList-js增强",enhanceJs)
        if (enhanceJs) {
          let Obj = eval("(" + enhanceJs + ")");
          this.EnhanceJS = new Obj(getAction, postAction, deleteAction);
          this.cgButtonJsHandler('created')
        } else {
          this.EnhanceJS = ''
        }
      },
      initCgButtonList(btnList) {
        let linkArr = []
        let buttonArr = []
        if (btnList && btnList.length > 0) {
          for (let i = 0; i < btnList.length; i++) {
            let temp = btnList[i]
            if (temp.buttonStyle == 'button') {
              buttonArr.push(temp)
            } else if (temp.buttonStyle == 'link') {
              linkArr.push(temp)
            }
          }
        }
        this.cgButtonLinkList = [...linkArr]
        this.cgButtonList = [...buttonArr]
        console.log("链接增强", this.cgButtonLinkList);
      },
      cgButtonJsHandler(buttonCode) {
        if (this.EnhanceJS[buttonCode]) {
          this.EnhanceJS[buttonCode](this)
        }
      },
      cgButtonActionHandler(buttonCode) {
        //处理自定义button的 需要配置该button自定义sql
        if (!this.selectedRowKeys || this.selectedRowKeys.length == 0) {
          this.$message.warning("请先选中一条记录")
          return false
        }
        if (this.selectedRowKeys.length > 1) {
          this.$message.warning("请只选中一条记录")
          return false
        }
        let params = {
          formId: this.code,
          buttonCode: buttonCode,
          dataId: this.selectedRowKeys[0]
        }
        console.log("自定义按钮请求后台参数：", params)
        postAction(this.url.buttonAction, params).then(res => {
          if (res.success) {
            this.loadData()
            this.$message.success("处理完成!")
          } else {
            this.$message.warning("处理失败!")
          }
        })

      },
      cgButtonLinkHandler(record, buttonCode, optType) {
        if (optType == "js") {
          if (this.EnhanceJS[buttonCode]) {
            this.EnhanceJS[buttonCode](this, record)
          }
        } else if (optType == "action") {
          let params = {
            formId: this.code,
            buttonCode: buttonCode,
            dataId: record.id
          }
          console.log("自定义按钮link请求后台参数：", params)
          postAction(this.url.buttonAction, params).then(res => {
            if (res.success) {
              this.loadData()
              this.$message.success("处理完成!")
            } else {
              this.$message.warning("处理失败!")
            }
          })
        }
      },


      openAddBtn() {
        this.pr = {id: 0, mcode: '', mname: ''};
        this.modalVisible = true;
        this.modalTitle = '产品/物料明细新增';
        this.currentState = 1;
      },
      openAddBtn2(record) {
        this.currentEdit = record;
        this.pr = {id: record.mid, mcode: record.mcode, mname: record.mname};

        this.currentState = 2;
        this.modalVisible = true;
        this.modalTitle = '产品/物料明细编辑';
      },


      clickMcodeInput() {
        this.productionListVisible = true;
        this.productionQuery();

      },

      productionQuery() {
        let param = {
          pageNo: this.productionIpagination.current,
          pageSize: this.productionIpagination.size,
        }
        param.mcode = this.selectMcode;
        console.log(param)

        getAction('/basic-business/auto/baCpinfoMain/list', param).then(res => {
          if (res.success) {
            this.productionIpagination = res.data;
            this.productionList = res.data.records;
          } else {
            this.$message.error("获取物料数据报错");
          }
        })
      },
      sureAddProduction() {
        let flag = true;
        if (this.pr.mid = 0 || !this.pr.mid || this.pr.mid === '') {
          flag = false;
          this.$message.error("请选择产品");
        }


        if (flag) {
          switch (this.currentState) {
            case 1:
              this.productionAdd();
              break;

            case 2:
              this.productionEdit();
              break;
          }
        }

      },
      productionEdit(){
        let data = this.currentEdit;

        data.mid = this.pr.mid;
        data.mcode = this.pr.mcode;
        data.mname = this.pr.mname;
        putAction('/mes-quality/mesQcInspectTemplateMaintain/editMesQcQualityFile',data).then(res=>{
          if(res.success){
            this.modalVisible= false;
            this.$message.success("新增成功！");
            this.loadData();
          }else{
            this.$message.warning(res.msg);
          }
        })
      },

      productionAdd(){
        let data = {
          mesItmId:this.mainId,
          mid:parseInt(this.pr.id),
          mcode:this.pr.mcode,
          mname:this.pr.mname,
        }

        postAction('/mes-quality/mesQcInspectTemplateMaintain/addMesQcQualityFile',data).then(res=>{
          if(res.success){
            this.modalVisible= false;
            this.$message.success("新增成功！");
            this.loadData();
          }else{
            this.$message.warning(res.msg);
          }
        })
      },


      productionSelectChange(selectedRowKeys, selectionRows){
        this.productionKeys = selectedRowKeys;
        this.productionRows = selectionRows;
      },
      selectProductionFinish(){
        console.log(this.productionRows[0])
        if(this.productionRows.length>0){
          let obj = this.productionRows[0];
          this.pr.mid  = obj.id;
          this.pr.mcode  = obj.mcode;
          this.pr.mname  = obj.mname;
        }
        this.productionListVisible = false;
      },


    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>
